<template>
  <MainLayout>
    <view class="page">
      <!-- 顶部导航栏 -->
      <view class="header">
        <image class="back-icon" src="/static/icons/normalReturn.svg" @click="goBack"></image>
        <text class="header-title">{{ provinceInfo.province }}</text>
      </view>

      <!-- 天气概览卡片 -->
      <view class="weather-card" :style="{ backgroundColor: getWeatherColor(provinceInfo.weather) }">
        <view class="weather-main">
          <span class="iconify weather-icon" :data-icon="getWeatherIcon(provinceInfo.weather)"></span>
          <view class="temperature-info">
            <text class="temperature">{{ provinceInfo.temperatureFloat }}°C</text>
            <text class="weather-desc">{{ provinceInfo.weather }}</text>
          </view>
        </view>
        <view class="weather-details">
          <view class="detail-item">
            <text class="detail-label">湿度</text>
            <text class="detail-value">{{ provinceInfo.humidityFloat }}%</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">更新时间</text>
            <text class="detail-value">{{ formatUpdateTime(provinceInfo.updateTime) }}</text>
          </view>
        </view>
      </view>

      <!-- 基于温湿度的建议 -->
      <view class="suggestions-section">
        <view class="section-title">🌿 养生建议</view>
        <view class="suggestions-container">
          <view class="suggestion-item" v-for="(suggestion, index) in suggestions" :key="index">
            <text class="suggestion-icon">💡</text>
            <text class="suggestion-text">{{ suggestion }}</text>
          </view>
        </view>
      </view>

      <!-- 草本推荐 -->
      <view class="herbs-section">
        <view class="section-title">🌱 适宜草本</view>
        <view class="herbs-container">
          <view class="herb-item" v-for="(herb, index) in suitableHerbs" :key="index">
            <image :src="herb.image" class="herb-image" mode="aspectFill"></image>
            <text class="herb-name">{{ herb.name }}</text>
            <text class="herb-benefit">{{ herb.benefit }}</text>
          </view>
        </view>
      </view>

      <!-- 运动建议 -->
      <view class="exercise-section">
        <view class="section-title">🏃‍♀️ 运动推荐</view>
        <view class="exercise-container">
          <view class="exercise-item" v-for="(exercise, index) in exerciseSuggestions" :key="index">
            <text class="exercise-icon">{{ exercise.icon }}</text>
            <text class="exercise-name">{{ exercise.name }}</text>
            <text class="exercise-desc">{{ exercise.desc }}</text>
          </view>
        </view>
      </view>
    </view>
  </MainLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import MainLayout from '../../layout/MainLayout.vue'
import { onLoad } from '@dcloudio/uni-app'

const provinceInfo = ref({
  province: '',
  weather: '',
  temperatureFloat: 0,
  humidityFloat: 0,
  updateTime: ''
})

const suggestions = ref([])
const suitableHerbs = ref([])
const exerciseSuggestions = ref([])

// 获取天气颜色
const getWeatherColor = (weather) => {
  if (!weather) return '#ffffff';

  const weatherColors = {
    '晴': '#FFE082',
    '少云': '#FFD700',
    '晴间多云': '#FFD700',
    '多云': '#E0E0E0',
    '阴': '#B0BEC5',
    '有风': '#A5D8FF',
    '平静': '#C8E6C9',
    '微风': '#B3E5FC',
    '和风': '#B3E5FC',
    '清风': '#B3E5FC',
    '强风/劲风': '#90CAF9',
    '疾风': '#90CAF9',
    '大风': '#90CAF9',
    '烈风': '#90CAF9',
    '风暴': '#90CAF9',
    '狂爆风': '#90CAF9',
    '飓风': '#90CAF9',
    '热带风暴': '#90CAF9',
    '霾': '#EEEEEE',
    '中度霾': '#EEEEEE',
    '重度霾': '#EEEEEE',
    '严重霾': '#EEEEEE',
    '阵雨': '#90CAF9',
    '雷阵雨': '#CE93D8',
    '雷阵雨并伴有冰雹': '#CE93D8',
    '小雨': '#90CAF9',
    '中雨': '#90CAF9',
    '大雨': '#90CAF9',
    '暴雨': '#90CAF9',
    '大暴雨': '#90CAF9',
    '特大暴雨': '#90CAF9',
    '强阵雨': '#90CAF9',
    '强雷阵雨': '#CE93D8',
    '极端降雨': '#90CAF9',
    '毛毛雨/细雨': '#90CAF9',
    '雨': '#90CAF9',
    '小雨-中雨': '#90CAF9',
    '中雨-大雨': '#90CAF9',
    '大雨-暴雨': '#90CAF9',
    '暴雨-大暴雨': '#90CAF9',
    '大暴雨-特大暴雨': '#90CAF9',
    '雨雪天气': '#B3E5FC',
    '雨夹雪': '#B3E5FC',
    '阵雨夹雪': '#B3E5FC',
    '冻雨': '#B3E5FC',
    '雪': '#B3E5FC',
    '阵雪': '#B3E5FC',
    '小雪': '#B3E5FC',
    '中雪': '#B3E5FC',
    '大雪': '#B3E5FC',
    '暴雪': '#B3E5FC',
    '小雪-中雪': '#B3E5FC',
    '中雪-大雪': '#B3E5FC',
    '大雪-暴雪': '#B3E5FC',
    '浮尘': '#CFD8DC',
    '扬沙': '#CFD8DC',
    '沙尘暴': '#CFD8DC',
    '强沙尘暴': '#CFD8DC',
    '龙卷风': '#CE93D8',
    '雾': '#CFD8DC',
    '浓雾': '#CFD8DC',
    '强浓雾': '#CFD8DC',
    '轻雾': '#CFD8DC',
    '大雾': '#CFD8DC',
    '特强浓雾': '#CFD8DC',
    '热': '#FFC107',
    '冷': '#2196F3',
    '未知': '#CCCCCC'
  };

  return weatherColors[weather] || '#ffffff';
};

// 获取天气图标
const getWeatherIcon = (weather) => {
  if (!weather) return 'wi:day-sunny';

  const weatherIcons = {
    '晴': 'wi:day-sunny',
    '少云': 'wi:day-sunny-overcast',
    '晴间多云': 'wi:day-sunny-overcast',
    '多云': 'wi:day-cloudy',
    '阴': 'wi:cloudy',
    '有风': 'wi:wind',
    '平静': 'wi:day-sunny',
    '微风': 'wi:wind',
    '和风': 'wi:wind',
    '清风': 'wi:wind',
    '强风/劲风': 'wi:wind',
    '疾风': 'wi:wind',
    '大风': 'wi:wind',
    '烈风': 'wi:wind',
    '风暴': 'wi:storm',
    '狂爆风': 'wi:storm',
    '飓风': 'wi:storm',
    '热带风暴': 'wi:storm',
    '霾': 'wi:day-haze',
    '中度霾': 'wi:day-haze',
    '重度霾': 'wi:day-haze',
    '严重霾': 'wi:day-haze',
    '阵雨': 'wi:rain',
    '雷阵雨': 'wi:thunderstorm',
    '雷阵雨并伴有冰雹': 'wi:thunderstorm',
    '小雨': 'wi:rain',
    '中雨': 'wi:rain',
    '大雨': 'wi:rain',
    '暴雨': 'wi:rain',
    '大暴雨': 'wi:rain',
    '特大暴雨': 'wi:rain',
    '强阵雨': 'wi:rain',
    '强雷阵雨': 'wi:thunderstorm',
    '极端降雨': 'wi:rain',
    '毛毛雨/细雨': 'wi:rain',
    '雨': 'wi:rain',
    '小雨-中雨': 'wi:rain',
    '中雨-大雨': 'wi:rain',
    '大雨-暴雨': 'wi:rain',
    '暴雨-大暴雨': 'wi:rain',
    '大暴雨-特大暴雨': 'wi:rain',
    '雨雪天气': 'wi:snow',
    '雨夹雪': 'wi:snow',
    '阵雨夹雪': 'wi:snow',
    '冻雨': 'wi:snow',
    '雪': 'wi:snow',
    '阵雪': 'wi:snow',
    '小雪': 'wi:snow',
    '中雪': 'wi:snow',
    '大雪': 'wi:snow',
    '暴雪': 'wi:snow',
    '小雪-中雪': 'wi:snow',
    '中雪-大雪': 'wi:snow',
    '大雪-暴雪': 'wi:snow',
    '浮尘': 'wi:dust',
    '扬沙': 'wi:dust',
    '沙尘暴': 'wi:dust',
    '强沙尘暴': 'wi:dust',
    '龙卷风': 'wi:tornado',
    '雾': 'wi:fog',
    '浓雾': 'wi:fog',
    '强浓雾': 'wi:fog',
    '轻雾': 'wi:fog',
    '大雾': 'wi:fog',
    '特强浓雾': 'wi:fog',
    '热': 'wi:hot',
    '冷': 'wi:cold',
    '未知': 'wi:day-sunny'
  };

  return weatherIcons[weather] || 'wi:day-sunny';
};

// 格式化更新时间
const formatUpdateTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${hours}:${minutes}`;
};

// 根据温湿度生成建议
const generateSuggestions = () => {
  const temp = provinceInfo.value.temperatureFloat;
  const humidity = provinceInfo.value.humidityFloat;
  const weather = provinceInfo.value.weather;
  const suggestionsList = [];

  // 温度相关建议
  if (temp < 0) {
    suggestionsList.push("天气严寒，注意保暖，避免户外活动时间过长");
    suggestionsList.push("可适当食用温热食物如生姜、羊肉等驱寒");
  } else if (temp < 10) {
    suggestionsList.push("天气寒冷，注意添衣保暖，预防感冒");
    suggestionsList.push("适合饮用温热茶水，如红茶、普洱等");
  } else if (temp < 20) {
    suggestionsList.push("温度适中，适合户外活动和锻炼");
    suggestionsList.push("可根据天气变化适时增减衣物");
  } else if (temp < 30) {
    suggestionsList.push("天气温暖舒适，有利于身心健康");
    suggestionsList.push("注意补充水分，避免中暑");
  } else {
    suggestionsList.push("天气炎热，需防暑降温，避免长时间暴露在高温环境中");
    suggestionsList.push("多喝水，适量摄入清凉解暑的食物如西瓜、绿豆汤等");
  }

  // 湿度相关建议
  if (humidity < 30) {
    suggestionsList.push("空气干燥，注意皮肤保湿和呼吸道防护");
    suggestionsList.push("室内可使用加湿器或放置水盆增加湿度");
  } else if (humidity > 70) {
    suggestionsList.push("空气潮湿，注意防潮防霉");
    suggestionsList.push("易滋生细菌，注意饮食卫生和个人清洁");
  }

  // 天气相关建议
  if (weather.includes('雨')) {
    suggestionsList.push("雨天路滑，出行请注意安全");
    suggestionsList.push("湿度较大，注意关闭门窗防止湿气进入");
  } else if (weather.includes('晴')) {
    suggestionsList.push("阳光明媚，适合晾晒衣物和户外活动");
    suggestionsList.push("紫外线较强，外出请注意防晒");
  } else if (weather.includes('雪')) {
    suggestionsList.push("雪天寒冷，注意保暖和防滑");
    suggestionsList.push("可适当进补温热食物抵御严寒");
  } else if (weather.includes('雾')) {
    suggestionsList.push("能见度低，出行请注意交通安全");
    suggestionsList.push("空气质量可能较差，敏感人群应减少外出");
  }

  suggestions.value = suggestionsList;
};

// 根据温湿度推荐适宜草本
const generateSuitableHerbs = () => {
  const temp = provinceInfo.value.temperatureFloat;
  const humidity = provinceInfo.value.humidityFloat;
  const herbsList = [];

  if (temp < 0) {
    herbsList.push({
      name: "人参",
      benefit: "大补元气，复脉固脱，益气摄血",
      image: "/static/images/herbs/ginseng.jpg"
    });
    herbsList.push({
      name: "附子",
      benefit: "回阳救逆，补火助阳，散寒止痛",
      image: "/static/images/herbs/aconite.jpg"
    });
  } else if (temp < 10) {
    herbsList.push({
      name: "黄芪",
      benefit: "补气升阳，固表止汗，利水消肿",
      image: "/static/images/herbs/milkvetch.jpg"
    });
    herbsList.push({
      name: "当归",
      benefit: "补血活血，调经止痛，润肠通便",
      image: "/static/images/herbs/angelica.jpg"
    });
  } else if (temp >= 10 && temp < 25) {
    herbsList.push({
      name: "菊花",
      benefit: "散风清热，平肝明目，清热解毒",
      image: "/static/images/herbs/chrysanthemum.jpg"
    });
    herbsList.push({
      name: "薄荷",
      benefit: "宣散风热，清利头目，利咽透疹",
      image: "/static/images/herbs/peppermint.jpg"
    });
  } else {
    herbsList.push({
      name: "金银花",
      benefit: "清热解毒，疏散风热",
      image: "/static/images/herbs/honeysuckle.jpg"
    });
    herbsList.push({
      name: "芦根",
      benefit: "清热泻火，生津止渴，除烦止呕",
      image: "/static/images/herbs/reed.jpg"
    });
  }

  // 根据湿度调整
  if (humidity < 30) {
    herbsList.push({
      name: "麦冬",
      benefit: "养阴生津，润肺清心",
      image: "/static/images/herbs/ophiopogon.jpg"
    });
    herbsList.push({
      name: "沙参",
      benefit: "养阴清肺，益胃生津",
      image: "/static/images/herbs/adenophora.jpg"
    });
  } else if (humidity > 70) {
    herbsList.push({
      name: "茯苓",
      benefit: "利水渗湿，健脾宁心",
      image: "/static/images/herbs/poria.jpg"
    });
    herbsList.push({
      name: "薏苡仁",
      benefit: "利水渗湿，健脾止泻，除痹排脓",
      image: "/static/images/herbs/coix.jpg"
    });
  }

  suitableHerbs.value = herbsList;
};

// 根据温湿度推荐运动方式
const generateExerciseSuggestions = () => {
  const temp = provinceInfo.value.temperatureFloat;
  const humidity = provinceInfo.value.humidityFloat;
  const weather = provinceInfo.value.weather;
  const exercises = [];

  if (temp < 0) {
    exercises.push({
      name: "室内瑜伽",
      desc: "温暖环境下进行柔和拉伸，促进血液循环",
      icon: "🧘"
    });
    exercises.push({
      name: "太极",
      desc: "缓慢动作有助气血运行，适合低温环境",
      icon: "☯️"
    });
  } else if (temp < 10) {
    exercises.push({
      name: "快走",
      desc: "适度强度运动，增强身体产热能力",
      icon: "🚶"
    });
    exercises.push({
      name: "健身操",
      desc: "室内团体运动，提高身体活力",
      icon: "💪"
    });
  } else if (temp >= 10 && temp < 25) {
    exercises.push({
      name: "慢跑",
      desc: "理想温度下有氧运动，提升心肺功能",
      icon: "🏃"
    });
    exercises.push({
      name: "骑行",
      desc: "户外休闲运动，享受自然风光",
      icon: "🚴"
    });
  } else if (temp >= 25 && temp < 35) {
    exercises.push({
      name: "游泳",
      desc: "水中运动有效降温，减轻关节负担",
      icon: "🏊"
    });
    exercises.push({
      name: "晨练",
      desc: "避开中午高温，在清晨进行适度运动",
      icon: "🌅"
    });
  } else {
    exercises.push({
      name: "室内运动",
      desc: "高温天气建议室内进行，避免中暑",
      icon: "🏠"
    });
    exercises.push({
      name: "傍晚散步",
      desc: "选择凉爽时段进行轻松步行",
      icon: "🌆"
    });
  }

  // 根据湿度和天气调整
  if (humidity > 70 || weather.includes('雨') || weather.includes('雾')) {
    exercises.unshift({
      name: "室内锻炼",
      desc: "高湿或恶劣天气建议室内运动",
      icon: "🏠"
    });
  }

  exerciseSuggestions.value = exercises;
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 页面加载时获取参数
onLoad((options) => {
  if (options && options.provinceInfo) {
    try {
      provinceInfo.value = JSON.parse(decodeURIComponent(options.provinceInfo));
      generateSuggestions();
      generateSuitableHerbs();
      generateExerciseSuggestions();
    } catch (e) {
      console.error('解析省份信息失败:', e);
      uni.showToast({
        title: '数据加载失败',
        icon: 'none'
      });
      goBack();
    }
  } else {
    uni.showToast({
      title: '参数错误',
      icon: 'none'
    });
    goBack();
  }
});
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 0;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 999;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-left: 10px;
}

.weather-card {
  margin: 20px;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.weather-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.weather-icon {
  font-size: 64px;
  color: rgba(0, 0, 0, 0.7);
}

.temperature-info {
  text-align: right;
}

.temperature {
  font-size: 36px;
  font-weight: bold;
  color: #333;
}

.weather-desc {
  font-size: 18px;
  color: #555;
  margin-top: 5px;
}

.weather-details {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding-top: 15px;
}

.detail-item {
  text-align: center;
}

.detail-label {
  display: block;
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}

.detail-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 20px;
  padding-left: 10px;
  border-left: 4px solid #4CAF50;
}

.suggestions-container {
  margin: 0 20px;
  background-color: #fff;
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.suggestion-item:last-child {
  margin-bottom: 0;
}

.suggestion-icon {
  font-size: 18px;
  margin-right: 10px;
  margin-top: 2px;
}

.suggestion-text {
  flex: 1;
  font-size: 15px;
  color: #555;
  line-height: 1.5;
}

.herbs-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 0 20px 20px;
}

.herb-item {
  background-color: #fff;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.herb-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 10px;
  background-color: #f0f0f0;
}

.herb-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.herb-benefit {
  font-size: 13px;
  color: #777;
  line-height: 1.4;
}

.exercise-container {
  margin: 0 20px 20px;
  background-color: #fff;
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.exercise-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.exercise-item:last-child {
  border-bottom: none;
}

.exercise-icon {
  font-size: 24px;
  margin-right: 15px;
  width: 30px;
  text-align: center;
}

.exercise-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.exercise-desc {
  flex: 1;
  font-size: 14px;
  color: #777;
  line-height: 1.4;
}
</style>